<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList" @emptyViewReload="toRelease" :empty-view-reload-text="empty.emptyBtnText" :empty-view-reload-style="empty.emptyToReleaseStyle" :show-empty-view-reload-when-error="false" :show-empty-view-reload="true" :empty-view-img="empty.emptyImgUrl" :empty-view-img-style="empty.emptyImgStyle" :empty-view-text="empty.emptyText">

			<navComment :navTitle="'收到的评论'" :navRightTitle="unreadNum ? '一键已读' : '一键删除'" @navRight="allAlreadyRead"></navComment>

			<view class="box-pading" style="margin-top: 60rpx;">

				<commentItem v-for="(item,index) in dataList" :key="item.id" :record="item" :ifAlreadyRead="item.isRead === 0 ? false : true">
				</commentItem>

			</view>

		</z-paging>

		<!-- 弹窗 -->
		<u-popup :show="popupShow" mode="center" :round="10" @close="popupClose" @open="popupOpen">

			<view class="popup-box">

				<view class="popup-title">
					{{unreadNum ? '一键已读' : '一键删除'}}
				</view>

				<view class="popup-subhead">
					{{unreadNum ? '将所有消息设为已读' : '将所有消息删除'}}
				</view>

				<view class="popup-bottom flex-no-horizontal">

					<view>
						<u-button type="primary" class="popup-bottom-cancel" text="取消" @click="popupCancel"></u-button>
					</view>

					<view>
						
						<u-button type="primary" class="popup-bottom-confirm" text="确定" @click="readPopupConfirm" v-if="unreadNum">
						</u-button>
						
						<u-button type="primary" class="popup-bottom-confirm" text="确定" @click="delPopupConfirm" v-else>
						</u-button>
						
					</view>

				</view>

			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		unreadcommentsListApi,
		readcommentsAddApi,
		delAllCommentApi
	} from '../../api/index.js'
	import commentItem from './common/receivedCommet.vue'
	import navComment from './common/navCommentOrLike.vue'
	export default {
		components: {
			commentItem,
			navComment
		},
		data() {
			return {
				dataList: [],
				popupShow: false,
				unreadNum:0,
				empty:{
					emptyText:'您还没收到评论，先去发布一条动态吧～',
					emptyImgUrl:'/static/empty/comment-empty.png',
					emptyImgStyle:{
						width:'228px',
						height:'161px'
					},
					emptyToReleaseStyle:{
						padding:'10px 30px',
						backgroundColor:'#4ABC5A',
						borderRadius:'20px',
						color:'#FFFFFF',
						border:'none'
					},
					emptyBtnText:'去发布'
				},
			};
		},
		computed: {

		},
		onLoad() {

		},
		onUnload() {
			
		},
		methods: {
			//一键已读
			allAlreadyRead() {
				console.log('一键已读')
				if(this.dataList.length !== 0){
					this.popupShow = true
				}
			},
			
			//空状态，去发布
			toRelease(e){
				e(false);
				uni.navigateTo({
					url:'./releaseDynamic'
				})
			},
			
			//弹窗关闭
			popupClose() {

			},

			//弹窗打开
			popupOpen() {

			},

			//弹窗取消
			popupCancel() {
				this.popupShow = !this.popupShow
			},

			//弹窗已读确认
			async readPopupConfirm() {
				try {
					//一键已读
					const res = await readcommentsAddApi({
						isAll: 1
					})
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				} catch (e) {
					console.log(e)
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
				this.$refs.paging.reload()
				this.popupShow = !this.popupShow
			},
			
			//弹窗删除确定
			async delPopupConfirm(){
				try {
					//一键已读
					const res = await delAllCommentApi({
						isAll: 1
					})
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
				} catch (e) {
					console.log(e)
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
				this.$refs.paging.reload()
				this.popupShow = !this.popupShow
			},

			//下拉刷新,上拉加载
			async queryList(pageNo, pageSize) {
				try {
					//获取未读的评论
					const res = await unreadcommentsListApi({
						pageNum: pageNo,
						pageSize
					})
					this.unreadNum = res.count
					console.log(1234, res.data)
					this.$refs.paging.complete(res.data || []);
				} catch (e) {
					//TODO handle the exception
					this.$refs.paging.complete(false);
				}
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
				// 	this.$refs.paging.complete(res.data.list);
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			}
		},
	};
</script>

<style lang="scss" scoped>
	.popup-box {
		width: 560rpx;
		height: 360rpx;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;

		.popup-title {
			text-align: center;
			color: $uni-color-black;
			font-size: $uni-font-size-xlg;
			font-weight: bold;
			margin: 60rpx 0 40rpx 0;
		}

		.popup-subhead {
			text-align: center;
			color: $uni-color-black;
			font-size: $uni-font-size-base;
			margin-bottom: 60rpx;
		}

		.popup-bottom {
			width: 100%;
			justify-content: space-around;

			view {
				width: 235rpx;
				height: 80rpx;

			}

			.popup-bottom-cancel {
				border: 0;
				border-radius: 40rpx;
				background-color: rgba(247, 247, 247, 1);
				font-size: $uni-font-size-base;
				color: rgba(178, 180, 181, 1);
			}

			.popup-bottom-confirm {
				border: 0;
				border-radius: 40rpx;
				background-color: rgba(55, 214, 123, 1);
				font-size: $uni-font-size-base;
				color: #FFFFFF;
			}

		}
	}
</style>
